import React, { useState } from 'react'
import {
  Typography,
  Radio,
  Grid,
  Collapse,
  List,
  Tag,
  Avatar,
  Statistic,
  Checkbox,
  InputTag,
  Button,
  Link,
  Space,
} from '@arco-design/web-react'
import { IconFilter, IconHeart, IconStar, IconMessage } from '@arco-design/web-react/icon'

const CollapseItem = Collapse.Item
const Row = Grid.Row
const Col = Grid.Col
const customStyle = {
  // width: 830,
  width: '100%',
  borderRadius: 2,
  border: 'none',
  overflow: 'hidden',
}

const options = [
  {
    value: 'newest',
    label: '最新',
  },
  {
    value: 'active',
    label: '最热',
  },
  {
    value: 'bountied',
    label: '有悬赏',
  },
  {
    value: 'unanswered',
    label: '无人回答',
  },
]

// mock
const names = [
  'Efficient way to diagonalize a sparse, block tridiagonal matrix',
  'Significance test for influence of factor (with many levels of unequal size) and a binary dependent variable',
  'RabbitMQ starvation w/ celery design flaw - how to solve?',
]
const avatarSrc = [
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp',
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp',
]
const imageSrc = [
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/29c1f9d7d17c503c5d7bf4e538cb7c4f.png~tplv-uwbnlip3yd-webp.webp',
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/04d7bc31dd67dcdf380bc3f6aa07599f.png~tplv-uwbnlip3yd-webp.webp',
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/1f61854a849a076318ed527c8fca1bbf.png~tplv-uwbnlip3yd-webp.webp',
]
const dataSource = new Array(12306).fill(null).map((_, index) => {
  return {
    index: index,
    avatar: avatarSrc[index % avatarSrc.length],
    title: names[index % names.length],
    description:
      'Is there an efficient way to diagonalize a block tridiagonal NxN matrix? The matrix is made up of blocks of size K with N = 2 * K * K Is there an efficient way to diagonalize a block tridiagonal NxN matrix? The matrix is made up of blocks of size K with N = 2 * K * K',
    imageSrc: imageSrc[index % imageSrc.length],
  }
})

function Questions() {
  const [list, setList] = useState([])
  const [filterExpand, setFilterExpand] = useState(false)
  const [filterRadio, setFilterRadio] = useState('newest')
  const loadData = (filter) => {
    // todo
    setList([])
  }
  const handleFilterChange = (checked, e) => {
    setFilterRadio(checked)
    loadData()
  }

  const ListHeader = () => {
    return (
      <>
        <Row align='center'>
          <Col span={6}>
            <Typography.Title heading={6} style={{ marginTop: 8, marginBottom: 0, paddingBottom: 8 }}>
              <Statistic countUp countDuration={1000} value={dataSource.length} groupSeparator /> 个问题
            </Typography.Title>
          </Col>
          <Col span={18} style={{ display: 'flex', alignContent: 'center' }}>
            <Radio.Group
              type='button'
              name='position'
              onChange={(checked, e) => handleFilterChange(checked, e)}
              options={options}
              defaultValue={'newest'}
              value={filterRadio}
            ></Radio.Group>
            <div style={{ marginLeft: 10 }}>
              <Checkbox.Group
                defaultValue={[]}
                value={filterExpand ? ['filter'] : []}
                onChange={(v) => setFilterExpand((pre) => !pre)}
              >
                <Checkbox value={'filter'}>
                  {({ checked }) => {
                    return (
                      <Tag size='large' icon={<IconFilter />} color={checked ? 'arcoblue' : ''}>
                        过滤
                      </Tag>
                    )
                  }}
                </Checkbox>
              </Checkbox.Group>
            </div>
          </Col>
          {/* 过滤折叠面板 */}
          <Collapse style={{ width: '100%' }} bordered={false} activeKey={filterExpand ? ['filter'] : ['']}>
            <CollapseItem style={customStyle} name='filter' showExpandIcon={false}>
              <FilterList />
              <Button
                type='primary'
                onClick={() => {
                  // todo：过滤按钮点击处理
                }}
              >
                应用过滤
              </Button>
              <Button type='text' onClick={() => setFilterExpand(false)}>
                取消
              </Button>
            </CollapseItem>
          </Collapse>
        </Row>
      </>
    )
  }

  const filterListData = [
    {
      title: '过滤',
      options: [
        { label: '无人回答', value: 'No answers' },
        { label: '无精选回答', value: 'No accepted answer' },
        { label: '有赏金', value: 'Has bounty' },
      ],
    },
    {
      title: '排序',
      options: [
        { label: '最新', value: 'Newest' },
        { label: '最近火热', value: 'Recent activity' },
        { label: '高悬赏', value: 'Highest score' },
        { label: '最多人问', value: 'Most frequent' },
        { label: '悬赏即将结束', value: 'Bounty ending soon' },
      ],
    },
    {
      title: '标签',
      options: [
        { label: '我关注的标签', value: 'My watched tags' },
        { label: '输入标签', value: 'inputTags' },
      ],
    },
  ]
  const FilterList = () => {
    return (
      <List
        grid={{
          sm: 24,
          md: 12,
          lg: 8,
          xl: 6,
        }}
        dataSource={filterListData}
        bordered={false}
        split={false}
        render={(item, index) => (
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <span style={{ fontWeight: 'bold' }} key={index}>
              {item.title}
            </span>
            {item.title === '过滤' && <Checkbox.Group direction='vertical' options={item.options} />}
            {item.title === '排序' && (
              <Radio.Group direction='vertical' options={item.options} defaultValue={'Newest'} />
            )}
            {item.title === '标签' && (
              <>
                <Radio.Group direction='vertical' options={item.options} defaultValue={'inputTags'} />
                <InputTag allowClear placeholder='例如：Java 或 Python'></InputTag>
              </>
            )}
          </div>
        )}
      />
    )
  }

  return (
    <div>
      {/* 标题 */}
      <Typography.Title style={{ marginTop: 0 }} heading={3}>
        所有问题
      </Typography.Title>
      {/* 列表头部 border-bottom: 1px solid var(--color-neutral-3);*/}
      <ListHeader />
      {/* 列表 */}
      <div className='question-list'>
        <List
          className='list-demo-action-layout'
          // wrapperStyle={{ maxWidth: 830 }}
          bordered={false}
          pagination={{ showTotal: true, bufferSize: 3, showJumper: true, sizeCanChange: [10, 50, 100] }}
          dataSource={dataSource}
          render={(item, index) => (
            <List.Item
              key={index}
              style={{ padding: '20px 0', color: '#666666', borderBottom: '1px solid var(--color-fill-3)' }}
              actionLayout='vertical'
              actions={[
                <span key={1}>
                  {/* <IconHeart /> */}
                  点赞 {83}
                </span>,
                <span key={2}>
                  {/* <IconStar /> */}
                  回答 {item.index}
                </span>,
                <span key={3}>
                  {/* <IconMessage /> */}
                  查看 {98}
                </span>,
                <span key={3}>
                  {/* <IconMessage /> */}
                  悬赏 {50}
                </span>,
                <div className='question-list-item-tags'>
                  <Space>
                    <Tag color='gray' onClick={() => console.log('click tag')}>
                      Java
                    </Tag>
                    <Tag color='gray' onClick={() => console.log('click tag')}>
                      Spring
                    </Tag>
                    <Tag color='gray' onClick={() => console.log('click tag')}>
                      RabbitMQ
                    </Tag>
                  </Space>
                </div>,
              ]}
              // extra={<div className='image-area'>{/* <img alt='arcodesign' src={item.imageSrc} /> */}</div>}
            >
              <List.Item.Meta
                // avatar={
                //   <Avatar shape='square'>
                //     <img alt='avatar' src={`${item.avatar}`} />
                //   </Avatar>
                // }
                title={
                  <Link hoverable={false} style={{ fontSize: 16 }} href='#'>
                    {item.title}
                  </Link>
                }
                description={<span style={{ fontSize: 14 }}>{item.description}</span>}
              />
            </List.Item>
          )}
        />
      </div>
    </div>
  )
}

export default Questions
